<template>
  <div class="container">
    <div class="action">
      <a-button type="primary" @click="openCategory" :icon="h(PlusCircleOutlined)">新增 </a-button>
      <a-button
        type="primary"
        v-if="tags.length"
        @click="editable = !editable"
        :icon="editable ? h(EditOutlined) : h(SettingOutlined)"
        >编辑
      </a-button>
    </div>
    <a-input
      v-show="isEdit"
      ref="newCategoryRef"
      v-model:value.trim="newCategory"
      placeholder="请输入新的分类标签"
      style="margin-bottom: 15px"
      @blur="closeAddCategory"
      @keyup.enter="addCategory"
    />
    <template v-if="tags.length">
      <a-tag
        class="category"
        v-for="item in tags"
        :key="item.id"
        @click="toggleCategory(item)"
        :color="item.id === currentCategory ? 'success' : 'blue'"
        :data-id="item.id"
        :title="item.label"
        :closable="editable && item.id !== 'all'"
        @close="deleteCategory(item)"
      >
        {{ item.label }}
      </a-tag>
    </template>
    <a-empty v-else :image="Empty.PRESENTED_IMAGE_SIMPLE" />
  </div>
</template>

<script lang="ts" setup>
import { ref, toRefs, h } from 'vue'
import { PlusCircleOutlined, SettingOutlined, EditOutlined } from '@ant-design/icons-vue'
import { ipcApiRoute } from '@/api/router'
import type { ICategory } from '@/types/category'
import type { IFile } from '@/types/file'
import { Empty, message } from 'ant-design-vue'
import { emitter, ipc } from '@/core'

// 定义props
const props = defineProps({
  currentCategory: {
    type: [String, Number],
    required: true,
  },
})
const { currentCategory } = toRefs(props)
const editable = ref(false)

// 定义emits
const emit = defineEmits(['changeCategory'])

/**
 * 查询所有分类
 */
let tags = ref<ICategory[]>([])
const queryAllCategory = (reload: boolean = false) => {
  ipc.invoke(ipcApiRoute.queryAllTag).then((res: any) => {
    if (res.code === 200) {
      const list = (res.result ?? []).map((item: any) => {
        return {
          id: item.id,
          label: item.tag,
        }
      })
      tags.value = [
        {
          id: 'all',
          label: '首页',
        },
        ...list,
      ]
      emitter.emit('updateCategories', list)
    }
  })
}
queryAllCategory()

/**
 * 切换分类
 */
const toggleCategory = (category: ICategory) => {
  emit('changeCategory', category.id)
}

/**
 * 删除分类
 */
const deleteCategory = (category: ICategory) => {
  ipc.invoke(ipcApiRoute.deleteTag, { id: category.id }).then((res: any) => {
    if (res.code === 200) {
      message.success('删除分类成功！')
      queryAllCategory(true)
    } else if (res.code === 501) {
      const info = res.result.map((item: IFile) => item.filename).join('<br>')
      message.error({
        content: `${res.message}<br>${info}`,
      })
    } else {
      message.error(res.message)
    }
  })
}

/**
 * 打开新增分类标签输入框
 */
let newCategory = ref()
let newCategoryRef = ref()
let isEdit = ref(false)
const openCategory = () => {
  isEdit.value = true // 打开输入框
  newCategoryRef.value?.focus() // 输入框获取焦点
}
/**
 * 添加分类标签
 */
const addCategory = () => {
  if (!newCategory.value) {
    message.warning('请输入分类标签！')
    return
  }
  ipc.invoke(ipcApiRoute.addTag, { tag: newCategory.value }).then((res: any) => {
    if (res.code === 200) {
      message.success('添加成功！')
      closeAddCategory()
      queryAllCategory()
    } else {
      message.error(res.message)
    }
  })
}
/**
 * 取消添加分类标签
 */
const closeAddCategory = () => {
  isEdit.value = false // 关闭输入框
  newCategory.value = '' // 重置输入框的值
}
</script>

<style scoped lang="less">
.container {
  width: 200px;
  margin-right: 10px;
  padding-right: 10px;
  overflow: auto;
  border-right: 1px solid var(--color-border-default);
  .action {
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-bottom: 15px;
  }
  .category {
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
    cursor: pointer;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    position: relative;
    ::v-deep(.ant-tag-close-icon) {
      position: absolute;
      right: 5px;
      top: 50%;
      transform: translateY(-45%);
    }
  }
  .ant-empty {
    margin-top: 30vh;
  }
}
</style>
